<!DOCTYPE html>
<html lang="zh-cn">
{{ template "top" . }}
<body>
{{ template "header" . }}
<div class="main">
  <div class="list-box">
    <dl class="c1">
      <dt>
        类型 :
      </dt>
        <a href="javascript:;" onclick="categoryClick('category', 0)" class="{{if eq $.categoryId 0}} current1 {{end}}">全部</a>
      {{ range .categoryItems }}
        <a href="javascript:;" onclick="categoryClick('category', {{ .ID }})" class="{{if eq $.categoryId .ID }} current1 {{end}}">{{ .Title }}</a>
      {{ end }}
    </dl>
    <dl class="c2">
      <dt>
        地区 :
      </dt>
      <a href="javascript:;" onclick="categoryClick('address', 0)" class="{{if eq $.addressId 0}} current2 {{end}}">全部</a>
      {{ range .addressItems }}
      <a href="javascript:;" onclick="categoryClick('address', {{ .ID }})" class="{{if eq $.addressId .ID }} current2 {{end}}">{{ .Title }}</a>
      {{ end }}
    </dl>
    <div class="sort">
      <dt>
        排序 :
      </dt>
      {{range .sortLinks }}
      <a href="javascript:;" onclick="categoryClick('sort', {{ .Index }})" class="mleft0 {{if eq $.sortId .Index }} current3 {{end}}"> {{ .Title }}</a>
      {{ end }}
    </div>
  </div>
  <input type="hidden" value="{{ .categoryId }}" name="a">
  <input type="hidden" value="{{ .addressId }}" name="b">
  <input type="hidden" value="{{ .sortId }}" name="c">
  <div style="clear:both;"></div>
  <ul class="content-list" style="margin-top: 10px;">

    {{ range .videos }}
    <li>
      <div class="li-img">
        <a href="/detail/{{ .ID }}" title="{{ .Title }}" target="_blank">
          <img src="{{ .Cover }}" alt="{{ .Title }}" referrerpolicy="no-referrer">
          <span class="bottom"><span class="bottom1">26229</span>
            <span class="bottom2">
              <i class="icon-play" style="top:0.07rem;position:relative;padding-right:3px;"></i>
              HD
            </span>
          </span>
        </a>
      </div>
      <div class="li-bottom">
        <h3><a href="/detail/{{ .ID }}" title="{{ .Title }}" target="_blank">{{ .Title }}</a><span>{{ .Grade }}</span></h3>
        <div class="tag">2022 / 巴西,丹麦,美国 / 纪录 / 葡萄牙语,图皮语</div>
      </div>
    </li>
    {{ end }}
  </ul>

  <div class="pages">
    {{ if gt .paging.CurrentPage 1 }}
    <a href="javascript:;" class="prev-page">上一页</a>
    {{ end }}
    {{ range $i, $page := seq (max (sub .paging.CurrentPage 2) 1) (min (add .paging.CurrentPage 2) .paging.TotalPage) }}
    {{ if eq $page $.paging.CurrentPage }}
    <a href="javascript:;" class="page-index page-active">{{ $page }}</a>
    {{ else }}
    <a href="javascript:;" class="page-index " data-page="{{ $page }}">{{ $page }}</a>
    {{ end }}
    {{ end }}
    {{ if lt .paging.CurrentPage .paging.TotalPage }}
    <a href="javascript:;" class="next-page">下一页</a>
    {{ end }}
  </div>

  <input type="hidden" name="totalPage" value="{{ .paging.TotalPage }}">
  <input type="hidden" name="zoneId" value="{{ .zoneId }}">

</div>
{{ template "links" . }}
{{ template "footer" . }}
</body>
{{ template "common_js" . }}
<script>

  let category_id = getLocationParams("cat")
  let address_id = getLocationParams("addr")
  let sort_id = getLocationParams("so")


  $(function () {


    $('.page-index').on('click', function () {

        let index = $(this).html()


        $.get('/api/v1/videos', {
          "page": index,
          "page_size": 20,
          "zone_id": $('input[name="zoneId"]').val(),
          "cat": category_id,
          "addr": address_id,
          "sortId": sort_id
        }, function (res) {
          if (!res.success) return false;

          // 遍历数据并进行拼接
          let html = '';
          for (let i = 0; i < res.data.length; i++) {
            let item = res.data[i];
            html += '<li>';
            html += '<div class="li-img">';
            html += '<a href="/detail/' + item.id + '" title="' + item.title + '" target="_blank">';
            html += '<img src="' + item.Cover + '" alt="' + item.title + '" referrerpolicy="no-referrer">';
            html += '<span class="bottom"><span class="bottom1">26229</span>';
            html += '<span class="bottom2">';
            html += '<i class="icon-play" style="top:0.07rem;position:relative;padding-right:3px;"></i>HD';
            html += '</span></span></a></div>';
            html += '<div class="li-bottom">';
            html += '<h3><a href="/detail/' + item.id + '" title="' + item.title + '" target="_blank">' + item.title + '</a><span>' + item.Grade + '</span></h3>';
            html += '<div class="tag">' + '空缺' + ' / ' +'空缺' + '</div></div>';
            html += '</li>';
          }


          // 获取要插入数据的DOM节点
          $(".content-list").html(html);

        })
    })

  })

  function categoryClick(type, id) {

    if (type == 'category') {
      category_id = id
    }
    if (type == 'address') {
      address_id = id
    }
    if (type == 'sort') {
      sort_id = id
    }

    console.log(window.location)

    let url_suffix = window.location.href.replace(window.location.search, '')

    window.location.href = url_suffix + "?cat=" + category_id + "&addr=" + address_id + "&so=" + sort_id

  }

  // 获取路由参数
  function getLocationParams(keyWords) {
    // 提取路由值（字符串）
    let href = window.location.href;
    // 从占位符开始截取路由（不包括占位符）
    let query = href.substring(href.indexOf("?") + 1);
    // 根据 & 切割字符串
    let vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
      let pair = vars[i].split("=");
      // 根据指定的参数名去筛选参数值
      if (pair[0] === keyWords) {
        return pair[1];
      }
    }
    return "";
  }
</script>
</html>